<template>
  <q-layout>
    <q-page-container>
      <q-page class="flex bg-image flex-center">
        <q-card
          v-bind:style="$q.screen.lt.sm ? { width: '80%' } : { width: '30%' }"
        >
          <q-card-section>
            <q-avatar size="103px" class="absolute-center shadow-10">
              <img
                src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202107%2F19%2F20210719150601_4401e.thumb.1000_0.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1685108172&t=232426938cbc64554c6c143fdb13fb4c"
              />
            </q-avatar>
          </q-card-section>
          <q-card-section>
            <div class="text-center q-pt-lg">
              <div class="col text-h6 ellipsis">登录</div>
            </div>
          </q-card-section>
          <q-card-section>
            <q-form class="q-gutter-md">
              <q-input filled v-model="username" label="用户名" lazy-rules />

              <q-input
                type="password"
                filled
                v-model="password"
                label="密码"
                lazy-rules
              />

              <div>
                <q-btn
                  label="登录"
                  type="button"
                  @click="login"
                  color="primary"
                />
              </div>
            </q-form>
          </q-card-section>
        </q-card>
      </q-page>
    </q-page-container>
  </q-layout>
</template>

<script setup lang="ts">
import { useAuthStore, useLayoutStore } from 'src/stores/layout-store';
import { ref } from 'vue';
import myRoutes from 'src/router/my-router';
import { useRouter } from 'vue-router';
import { useQuasar } from 'quasar';
const username = ref('小王');
const password = ref('12345');
const auth = useAuthStore();
const layout = useLayoutStore();
const router = useRouter();
const $q = useQuasar();

const login = () => {
  // 点击登录写入token
  auth.token = '2333333333';
  layout.menuList = myRoutes as Array<WJ.MenuItem>;
  $q.localStorage.set(layout.menuKey, myRoutes);

  router.push({ path: layout.mainPage.path }).then(() => {
    $q.notify({
      position: 'top',
      color: 'positive',
      message: '欢迎回来~ ' + username.value,
    });
  });
};
</script>

<style scoped>
.bg-image {
  background-image: linear-gradient(135deg, #7028e4 0%, #e5b2ca 100%);
}
</style>
